import React from 'react';
import {Layout} from 'antd';
import './index.less';
import {connect} from "dva";
import Curd from "components/Curd";
import {getAllDeviceType} from "../../../../models/deviceType";
import BaseComponent from "components/Base/BaseComponent";
import Button from "antd/lib/button";
import DataTable from "components/Base/DataTable";
import Icon from "components/Base/Icon";

const {Content, Footer, Header} = Layout;
@connect(({pushSetDevices}) => ({pushSetDevices}))
export default class extends BaseComponent {
  componentDidMount() {
    this.init(this.props.pushId);
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    prevProps.pushId != this.props.pushId && this.init(this.props.pushId);
  }

  getNamespace() {
    return 'pushSetDevices';
  }

  getTableColumns(self) {
    return [
      {
        title: 'pushId',
        name: 'pushId',
        formItem: {
          type: 'hidden'
        },
      },
      {
        title: '设备ID',
        name: 'numeration',
        tableItem: {},
      },
      {
        title: '病人ID',
        name: 'patientId',
        tableItem: {},
      },
      {
        title: '设备类型',
        name: 'deviceTypeId',
        dict: getAllDeviceType(),
        tableItem: {},
        formItem: {
          type: 'select',
          onChange: function handleChange(form, value) {
            self.dispatch({
              type: `${self.getNamespace()}/getDeviceType`,
              payload: {typeId:value,pushId:self.props.pushId},
            });
          },
          rules: [
            {
              required: true,
              message: '请选择设备类型'
            }
          ]
        }
      },
      {
        title: '设备',
        name: 'deviceId',
        dict: self.props.pushSetDevices.DeviceType,
        formItem: {
          type: 'select',
          mode:"multiple",
          optionFilterProp:"children",
          showSearch:'showSearch',
        },
        rules: [
          {
            required: true,
            message: '请选择设备'
          }
        ]
      },
      {
        title: '未推送数量',
        name: 'unPushData',
        tableItem: {},
      },
      {
        title: '操作',
        tableItem: {
          width: 100,
          render: (text, record) => (
            <DataTable.Oper>
              <Button tooltip="删除" onClick={e => self.onDelete(record)}>
                <Icon type="trash"/>
              </Button>
            </DataTable.Oper>
          )
        }
      }
    ];
  }

  init = () => {
    this.dispatch({
      type: `${this.getNamespace()}/init`,
      payload: {
        page: {pageNum: 1, pageSize: 10, id: this.props.pushId,},
        notice: this.showMsg
      },
    })
  }
  getPageInfo = ({pageNum, pageSize, filters, sorter}) => {
    let f = {};
    if (!!filters) {
      Object.keys(filters).forEach(key => {
        !!filters[key] && (f[key] = filters[key])
      });
    }
    this.dispatch({
      type: `${this.getNamespace()}/init`,
      payload: {
        page: {pageNum: (!!pageNum ? pageNum : 1), pageSize: (!!pageSize ? pageSize : 10), id: this.props.pushId,},
        filters: f, sorter, notice: this.showMsg,
      },
    })
  }
  /**
   * 添加或者更新数据
   */
  addAndModify = (value) => {
    let v = {};
    Object.keys(value).forEach(key => {
      !!value[key] && (v[key] = value[key])
    });
    // let list = v.deviceId.map(value => {
    //   return (
    //     {"deviceId":value,"pushId":this.props.pushId,"unPushData":0}
    //   );
    // });
    this.dispatch({
      type: `${this.getNamespace()}/save`,
      payload: {
        value: {...v,ids:v.deviceId, pushId: this.props.pushId,},
        notice: this.showMsg,
        success: () => {

          this.getPageInfo({ payload: {
              page: {pageNum: 1, pageSize: 10},
              notice: this.showMsg
            },});
        }
      }
    });
  };


  render() {


    const curdProps = {
      ...this.props,
      namespace: this.getNamespace(),
      init: this.init,
      getPageInfo: this.getPageInfo,
      addAndModify: this.addAndModify,
      tableColumns: this.getTableColumns,
      handleChange: this.handleChange,
      align: 'center',
    }

    return (
      <div className="bind">
        <Curd {...curdProps}/>
        <div className="top">
          <Button onClick={this.init}>刷新</Button>
        </div>
      </div>
    );
  }

}
